<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>角色管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<script type="text/javascript" src="../../lib/jquery/jquery-3.0.0.min.js"></script>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script src="../../static/js/app.js"></script>
		<script src="../../static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/common/optUtils.js"></script>
		<link rel="stylesheet" href="../../static/css/font.css">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<link rel="stylesheet" href="../../lib/formselect/formSelects-v4.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="weadmin-body">
			<form class="layui-form" id="FirstForm">
				<input id="id" name="id" type="hidden" />
				<input id="insertTime" name="insertTime" type="hidden" />
				<div class="layui-form-item">
					<label for="sysRoleName" class="layui-form-label">
                        <span class="we-red">*</span>角色名
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="sysRoleName" name="sysRoleName" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
				<label for="code" class="layui-form-label">角色编号</label>
				<div class="layui-input-inline">
					<input type="text" id="code" name="code" required="" lay-verify="required" autocomplete="off" class="layui-input">
				</div>
				</div>
				<div class="layui-form">
					<label class="layui-form-label"><span class="we-red">*</span>拥有权限</label>
					<div class="layui-input-block">
						<!-- 一定要加multiple属性啊,否则回显时会有问题-->
						<select id="permitIds" name="permitIds"  multiple="multiple" xm-select="select1" xm-select-search="" xm-select-search-type="dl" ></select>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label for="descpt" class="layui-form-label">描述</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" id="descpt" name="descpt" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
				</div>
			</form>
		</div>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript">
			var act = GetUrlParam("act");
			layui.extend({
				admin: '{/}../../static/js/admin'
			});
			layui.config({
				base: '../../lib/formselect/' //此处路径请自行处理, 可以使用绝对路径
			}).extend({
				formSelects: 'formSelects-v4.min'
			});
			layui.use(['form','layer','admin','jquery','laydate','formSelects'], function() {
				//判断该操作方式是新增还是编辑
				var form = layui.form,
						admin = layui.admin,
						laydate=layui.laydate,
						layer = layui.layer,
						formSelects = layui.formSelects,
						$=layui.jquery;
			if (act=='edit'){//修改角色
				var perIds="";
				var data1 =JSON.parse(sessionStorage.getItem('editRowData'));
				for (var o in data1){
					$("#"+o).val(data1[o]);
				};
				//获取该角色的权限
				new APIRequest(
						{
							url: global.api_url + "/sysRole/getPermitByRole",
							header: {content_type: "application/json;charset=UTF-8",Authorization:getUser().token},
							data:{role_id:data1.id},
							method: "Post",
							async: false,
							success: function (result) {
								var data2=result.data;

								for (var o in data2){
									perIds+=data2[o].permitId+',';
								}
							},
							dataType: "json"
						}
				);
				initPermit(act,perIds);
			}else {//添加角色
				initPermit(act);
			}
				formSelects.render('selectId');
				form.render();
				//监听提交
				form.on('submit(add)', function(data) {
					var d = data.field;
					if (act=='edit'){
						new APIRequest(
								{
									url: global.api_url + "/sysRole/editRole",
									header: {content_type: "application/json;charset=UTF-8",Authorization:getUser().token},
									data:d,
									method: "Post",
									async: false,
									success: function (result) {
										parent.location.reload();//刷新父页面
										parent.layui.admin.events.closeThisTabs();//关闭当前页面
										layer.msg("修改用户成功");
									},
									dataType: "json"
								}
						);
					} else {
						new APIRequest(
								{
									url: global.api_url + "/sysRole/addUser",
									header: {content_type: "application/json;charset=UTF-8",Authorization:getUser().token},
									data:d,
									method: "Post",
									async: false,
									success: function (result) {
										parent.location.reload();//刷新父页面
										parent.layui.admin.events.closeThisTabs();//关闭当前页面
										layer.msg("新增用户成功");
									},
									dataType: "json"
								}
						);
					}
					return false;
				});
			});


			//初始化数据
			function initPermit(act,perIds) {
				var htmls="<option value=''>请选择</option> ";
				new APIRequest(
						{
							url: global.api_url + "/sysRole/selectAll",
							header: {content_type: "application/json;charset=UTF-8",Authorization:getUser().token},
							async: false,
							success: function (result) {
								var da=result.data.records;
								var temflag=false;
								for (var o in da){
									temflag=false;
									if (act=='edit'){
										var strs = perIds.split(",");
										for (var i in strs){
											if (da[o].id==strs[i]){
												temflag=true;
												break;
											}
										}
										if (temflag){
											htmls+="<option value='"+da[o].id+"'  selected='selected'>"+da[o].sysRoleName+"</option>";
										} else {
											htmls+="<option value='"+da[o].id+"'>"+da[o].sysRoleName+"</option>";
										}
									} else {
										htmls+="<option value='"+da[o].id+"'>"+da[o].sysRoleName+"</option>";
									}
									console.log(htmls);
								}
								$("#permitIds").html(htmls);
							},
							dataType: "json"
						}
				);
			}
		</script>
	</body>

</html>